import classNames from 'classnames'
import {
  CheckboxEntry,
  ColorPickerEntry,
  InputEntry,
  TextAreaEntry,
  InputNumberEntry,
  RadioEntry,
  SelectEntry,
  SliderEntry
} from './ValueEntry'
import { ThemePicker } from './ObjectEntry'
import styles from './index.module.less'

const components = {
  checkbox: CheckboxEntry,
  colorPicker: ColorPickerEntry,
  input: InputEntry,
  textArea: TextAreaEntry,
  inputNumber: InputNumberEntry,
  radio: RadioEntry,
  select: SelectEntry,
  slider: SliderEntry,
  themePicker: ThemePicker
}

export default (props) => {
  const { layout = 'horizontal', type, label, style, ...opt } = props
  const Component = components[type]
  return (
    <div className={classNames(styles['widget'], styles[layout])} style={style}>
      {label ? <label className={styles['label']}>{label}</label> : null}
      <div className={classNames(styles['entry'], styles[type])}>
        {Component ? (
          <Component {...opt} />
        ) : (
          <div className={classNames(styles['warning'], 'ellipsis')}>{`暂无 ${type} 组件`}</div>
        )}
      </div>
    </div>
  )
}
